<template>
	<view>
		<view>
			<u-popup v-model="flag" mode="center" length="auto" border-radius="14" :mask-close-able="false">
				<slot></slot>
			</u-popup>
		</view>
		<view class="close_icon u-flex u-row-center" v-show="flag" @click="toClose">
			<!-- <view class="close_icon_solid u-flex u-row-center ">
				<u-icon name="close" color="#fff" size="34"></u-icon>
			</view> -->
			<!-- <u-icon name="close-circle" color="#fff" size="34"></u-icon> -->
			<icon type="clear" size="34"/>
		</view>
	</view>
</template>

<script>
	export default {
		name: "MyPopup",
		props: {
			showFlag: {
				type: Boolean,
				require: true,
			}
		},
		
		data() {
			return {
				flag:false,
			}
		},
		onLoad() {},
		methods: {
			toClose(){
				this.flag = false
				this.$emit("changeFlag",this.flag)
			}
		},
		watch:{
			showFlag:{
				immediate:true,
				handler(val){
					console.log(111)
					this.flag = val
				}
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.close_icon{
		// background: #282828;
		width: 70rpx;
		height: 70rpx;
		border-radius: 50%;
		position: absolute;
		z-index: 100001;
		left: 50%;
		transform: translate(-50%,60rpx);
		.close_icon_solid{
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			border: 1rpx solid #fff;
		}
	}
</style>
